<template>
  <view class="user">
    <!-- 个人信息 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view class="header" :class="{flow: userInfo.isPlus && memberTime > 7 || !isLogin}" @click="userDetail">
	
      <view class="head-1">
		  
        <image :src="userInfo.face || '/static/missing-face.png'"></image>
      </view>
      <view class="head-2" v-if="userInfo.id">
        <view class="user-name">{{ userInfo.nickName }}</view>
		<memberGrade v-if="userInfo.isPlus"></memberGrade>
      </view>
      <view class="head-2" v-else>
        <view class="user-name">登录/注册</view>
      </view>
      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
	  <view class="open_plus" v-if="(!userInfo.isPlus || (memberTime > 0 && memberTime < 7)) && isLogin">
	  	 <image class="crown" src="@/static/crown.png" mode=""></image>
		 <view class="adv">
			<view v-if="memberStatus">
			 	<text>PLUS会员将于</text>
			 	<text style="color: #C90606;">{{memberTime}}</text>
			 	<text>天后到期</text>
			</view>
			<text v-else>PLUS会员 畅享商品大折扣</text>
		 </view>
		 <view @tap.stop="toOpenMember">
		 	<button class="open_btn" v-if="memberStatus" >去续费</button>
		 	<button class="open_btn" v-else>去开通</button>
		 </view>
	  </view>
    </view>
    <!-- 积分，优惠券，关注， -->
    <div class="pointBox box">
      <u-row text-align="center" gutter="16" class="point">
        <u-col text-align="center" span="4" @click="navigateTo('/pages/shop/pages/mine/deposit/operation')">
          <view>预存款</view>
          <view class="money">{{ walletNum }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/shop/pages/cart/coupon/myCoupon')">
          <view>优惠券</view>
          <view>{{ couponNum || 0 }}</view>
        </u-col>

        <u-col text-align="center" span="4" @click="navigateTo('/pages/shop/pages/mine/myTracks')">
          <view>足迹</view>
          <view>{{ footNum || 0 }}</view>
        </u-col>
      </u-row>
      <!-- 我的订单，代付款 -->
      <view class="order">
       
        <view class="order-item" @click="navigateTo('/pages/shop/pages/order/myOrder?status=1')">
          <div class="bag bag2">
            <u-icon name="bag-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待付款</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/shop/pages/order/myOrder?status=3')">
          <div class="bag bag3">
            <u-icon name="car-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待收货</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/shop/pages/order/evaluate/myEvaluate')">
          <div class="bag bag4">
            <u-icon name="star-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>待评价</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/shop/pages/order/afterSales/afterSales')">
          <div class="bag bag5">
            <u-icon name="server-fill" size="35" color="#fff"></u-icon>
          </div>
          <view>售后</view>
        </view>
		<view class="order-item" @click="navigateTo('/pages/shop/pages/order/myOrder?status=0')">
		  <div class="bag bag1">
		    <u-icon name="order" size="35" color="#fff"></u-icon>
		  </div>
		  <view>我的订单</view>
		</view>
      </view>
    </div>
    <!-- 常用工具 -->

    <tool />
	<myTabbat :current="3"></myTabbat>
	<view style="height: 132rpx;"></view>
  </view>
</template>
<script>
import tool from "@/pages/shop/pages/tabbar/user/utils/tool.vue";
import { getCouponsNum, getFootprintNum } from "@/api/members.js";
import { getUserWallet,getUserInfo } from "@/api/members";
import myTabbat from "@/components/myTabbar/myTabbar.vue";
import memberGrade from "@/components/memberGrade/memberGrade.vue"
import storage from "@/utils/storage.js"; //缓存
export default {
  components: {
    tool,
	myTabbat,
	memberGrade
  },
  data() {
    return {
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false,
      userInfo: {},
      couponNum: "",
      footNum: "",
      walletNum: "",
    };
  },
  computed:{
	  isLogin(){
	  	return storage.getHasLogin()
	  },
		memberTime(){
			if(this.userInfo.isPlus && this.userInfo.plusEndDate){
				const timer = new Date()
				const memberOverTime = new Date(this.userInfo.plusEndDate)
				return Math.ceil((memberOverTime - timer) / (1000 * 60 * 60 * 24))
			}
			return 0
		},
		memberStatus(){
			return this.userInfo.isPlus && this.memberTime < 7
		}
  },
  onLoad() {},
  onShow() {
    this.userInfo = this.$options.filters.isLogin();
	console.log(this.$options);
    if (this.$options.filters.isLogin("auth")) {
      this.getUserOrderNum();
    } else {
      this.walletNum = 0;
    }
  },
  onPullDownRefresh() {
    this.getUserOrderNum();
    this.userInfo = this.$options.filters.isLogin();
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.navigateTo("/pages/shop/pages/mine/set/setUp");
    }
  },
  // #endif

  mounted() {},
  methods: {
	  toOpenMember(){
		  uni.navigateTo({
		  	url:"/pages/shop/pages/mine/member/member?time=" + this.memberTime
		  })
	  },
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navigateTo(url) {
      uni.navigateTo({
        url,
      });
    },
    userDetail() {
      this.userInfo.id
        ? this.navigateTo("/pages/tabbar/user/personalCenter/personalInformation")
        : this.$options.filters.navigateToLogin();
    },
    async getUserOrderNum() {
      uni.stopPullDownRefresh();

      Promise.all([
        getCouponsNum(), //优惠券
        getFootprintNum(), //浏览数量
        getUserWallet(), //预存款
      ]).then((res) => {
        this.couponNum = res[0].data.result;
        this.footNum = res[1].data.result;
        this.walletNum = res[2].data.result.memberWallet;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  overflow: auto;
}
.money {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open_plus{
	width: 669rpx;
	height: 147rpx;
	background: #FDEDCB;
	border-radius: 20rpx;
	position: absolute;
	bottom: 16rpx;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 22rpx;
	.crown{
		width: 64rpx;
		height: 45rpx;
		margin-right: 24rpx;
	}
	.adv{
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #A87232;
		margin-right: 48rpx;
	}
	.open_btn{
		width: 140rpx;
		height: 66rpx;
		background: #E4BB6F;
		border-radius: 33px;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
}
.user {
	
  .header {
    max-width: 100%;
    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
    height: calc(var(--status-bar-height) + 456rpx);
    background-size: cover;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    background-image: url("/static/img/main-bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
	position: relative;
    .head-1 {
      text-align: center;
      width: 152rpx;
	  height: 264rpx;
      position: relative;
      display: flex;
      align-items: center;
      image {
        width: 152rpx;
        height: 144rpx;
        border-radius: 50%;
        margin-bottom: 30rpx;
        border: 3px solid #fff;
      }
      .edti-head {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        top: 100rpx;
        right: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .head-2 {
      flex: 1;
      margin-left: 30rpx;
      margin-top: 100rpx;
      line-height: 1;
    }
    /deep/ .u-icon,
    .u-icon {
      margin-top: 106rpx;
    }
  }
  .pointBox {
    width: 94%;
    margin: 0 3%;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
  }
  .point {
    text-align: center;
    height: 160rpx;

    font-size: $font-sm;
    // #ifdef MP-WEIXIN
    padding: 24rpx;
    // #endif
    .u-col {
      view {
        color: $u-main-color;
        font-size: 28rpx;
      }
      view:last-child {
        margin-top: 8rpx;
        color: $main-color;
        font-size: $font-lg;
      }
    }
  }
  .order {
    height: 140rpx;
    text-align: center;
    font-size: $font-sm;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 3%;
    color: #999;
    .order-item {
      position: relative;
      line-height: 2em;
      width: 96rpx;
      :first-child {
        font-size: 48rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
.flow{
		 height: calc(var(--status-bar-height) + 360rpx) !important;
	}
.box {
  transform: translateY(-30rpx);
}
.user-name {
  font-size: 34rpx;
  margin-bottom: 28rpx;
}

.bag {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.bag1 {
  background: #ff4a48;
}

.bag2 {
  background: #ff992f;
}

.bag3 {
  background: #009ee0;
}

.bag4 {
  background: #00d5d5;
}

.bag5 {
  background: #28ccb0;
}
</style>
